<template>
	<view class="">
		<view class="" :style="{'height': tabHeight+'px','width': '100%'}"></view>
	</view>
	<view class="tabbar-container" :style="{'height': tabHeight+'px'}">
		<view class="tabbar-items animated fadeIn">
			<view class="tabbar-item" v-for="(item, index) in tabbarList" :key="item.id"
				:class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
				<view class="item-top">
					<up-icon :name="currentItem == item.id ? item.selectIcon : item.icon" customPrefix="custom-icon" :size="item.centerItem ? '130rpx':'44rpx'" :color="currentItem == item.id ? 'var(--color)' : '' "></up-icon>
				</view>
				<view class="item-bottom" :class="[currentItem == item.id ? '' : 'op-50']" :style="{'color':currentItem == item.id ? item.color: '' }">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {getTabbar} from '@/utils/request/api'
	import {
		ref,
		onMounted,
		computed,
		useAttrs
	} from 'vue'
	
	const props = defineProps({
		tabHeight:{
			default:100,
			type:Number
		}
	})
	
	onMounted(async() => {
		uni.hideTabBar({
			success: (res) => {
				console.log(res, '成功')
			},
			fail: (res) => {
				console.log(res, '失败')
			},
		})
		// await getTabbarApi()
		// 获取当前tab列表
		// uni.getTabBar().then(tabBar => {
		// 	console.log(tabBar, 'tabBar')
		// 	tabbarList.value.forEach((item, index) => {
		// 		item.path = tabBar.list[index].pagePath
		// 	})
		// 	// 可能还需要设置selected等  
		// });

		let pages = getCurrentPages()
		currentPath.value = '/' + pages[pages.length - 1].route
		currentItem.value = tabbarList.value.find((e) => e.path == currentPath.value)?.id ?? -1
	})

	const currentItem = ref(-1)
	const currentPath = ref('')
	// 异常状态下的默认导航
	const default_tabbarList = [
		{
			id: 0,
			path: '/pages/tabbar/home',
			icon: 'shouye-xiankuang1',
			selectIcon: 'shouye-tianchong',
			text: '首页',
			centerItem: false,
			color:'var(--color)'
		},
		{
			id: 4,
			path: '/pages/tabbar/my',
			icon: 'wode-xiankuang',
			selectIcon: 'wode-tianchong1',
			text: '我的',
			centerItem: false,
			color:'var(--color)'
		},
	]
	const tabbarList = ref([
		{
			id: 1,
			path: '/pages/tabbar/home',
			icon: '/static/icon/tabbar/1-0.png',
			selectIcon: '/static/icon/tabbar/1-1.png',
			text: '首页',
			centerItem: false,
			color:'var(--color)'
		},
		{
			id: 2,
			path: '/pages/card_draw/index',
			icon: '/static/icon/tabbar/2-0.png',
			selectIcon: '/static/icon/tabbar/2-1.png',
			text: '抽卡',
			centerItem: false,
			color:'var(--color)'
		},
		{
			id: 3,
			path: '/pages/play/index',
			icon: '/static/icon/tabbar/3-0.png',
			selectIcon: '/static/icon/tabbar/3-1.png',
			text: '',
			centerItem: true,
			color:'var(--color)'
		},
		{
			id: 4,
			path: '/pages/warehouse/index',
			icon: '/static/icon/tabbar/4-0.png',
			selectIcon: '/static/icon/tabbar/4-1.png',
			text: '仓库',
			centerItem: false,
			color:'var(--color)'
		},
		{
			id: 5,
			path: '/pages/tabbar/my',
			icon: '/static/icon/tabbar/5-0.png',
			selectIcon: '/static/icon/tabbar/5-1.png',
			text: '我的',
			centerItem: false,
			color:'var(--color)'
		},
	])

	const changeItem = (item) => {
		uni.switchTab({
			url: item.path,
			fail:(err)=>{
				uni.reLaunch({
					url: item.path,
				})
			}
		})
	}
	const getTabbarApi = async()=>{
		try{
			const res=await getTabbar({})
			tabbarList.value = res.list
		}catch(err){
			tabbarList.value = default_tabbarList
		}
	}
</script>

<style lang="scss" scoped>
	$theme-color: '';

	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		background: url('/static/icon/tabbar/base.png') no-repeat;
		background-size: 100% 100%;

		.tabbar-items {
			max-width: 100%;
			min-width: 100%;
			padding: 18rpx 3%;
			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));

			box-sizing: border-box;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999999;
			// border-radius: 150rpx;
		}


		.tabbar-item {
			flex: 1;
			min-width: 17%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;

			.item-top {
				width: 62rpx;
				height: 62rpx;
				padding: 10rpx 10rpx 0 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.item-bottom {
				margin: 3rpx 0 auto 0;
				font-size: 24rpx;
				width: 100%;
				white-space: nowrap;
				text-align: center;
			}
		}
	}
	
	@media screen and (min-width:960px){
		.tabbar-container{
			width: 750rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	@media screen and (max-width:960px){
		.tabbar-container{
			width: 100vw;
			left: 0;
		}
	}

	.tabbar-container .center-item {
		position: relative;

		.item-top {
			height: 130rpx;
			width: 130rpx;
			position: absolute;
			top: -45rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			
		}
		
		.item-bottom{
			margin: 65rpx 0 auto 0;
			font-size: 24rpx;
			width: 100%;
			white-space: nowrap;
			text-align: center;
		}

	}
</style>